<script lang="ts" setup>
import { watchEffect, ref } from 'vue';
import { message, Card } from 'ant-design-vue';
import { getTrack } from '#/api/moxi/aiDutyStatusRecords';

import dayjs from 'dayjs';
const open = ref<boolean>(false);

// 定义 props
const props = defineProps<{
    objData?: object;
}>();

const timelineData = ref<any>({});

const handleFormData = async (objData: object) => {
    if(objData){
        console.log('handleFormData:', objData);
        const res = await getTrack({userid:(objData as any).userid, startTime:(objData as any).startTime, endTime:(objData as any).endTime});
        console.log(res);
        if(res){
            timelineData.value = res;
            message.success('查询成功');
        }
    }
};
watchEffect(() => {
    if (props.objData) {
        console.log('接收到的formData:', props.objData);
        // 你的异步逻辑
        handleFormData(props.objData);
    }
});


// 获取年月日
const getYMD = (date: any) => {
    return dayjs(date).format('YYYY年MM月DD日');
};
//获取时分秒
const getHMS = (date: any) => {
    return dayjs(date).format('HH:mm:ss');
};
const currentVideoUrl = ref('');
const handleDetail = (videoUrl: any) => {
    currentVideoUrl.value = videoUrl; // 设置当前视频URL
    open.value = true;
};


// 定义搜索关键词的响应式变量
// const searchKeyword = ref('');

/**
 * 处理搜索操作
 */
// const handleSearch = () => {
//   if (searchKeyword.value.trim()) {
//     console.log('执行搜索，关键词: ', searchKeyword.value);
//     // 这里添加实际的搜索逻辑
//     message.success('开始搜索');
//   } else {
//     message.warning('请输入搜索关键词');
//   }
// };

/**
 * 处理重置操作
 */
// const handleReset = () => {
//   searchKeyword.value = '';
//   message.info('已重置搜索框');
// };

</script>
<template>
    <div class="h-full p-4">
        <div>
            <!-- <Card class="mr-4">
          <form @submit.prevent="handleSearch">
            <div class="search-input-group">
              <a-input
                v-model="searchKeyword"
                placeholder="请输入搜索关键词"
                style="width: 300px; margin-right: 10px"
              />
              <a-input
                v-model="searchKeyword"
                placeholder="请输入搜索关键词"
                style="width: 300px; margin-right: 10px"
              />
              <a-button type="primary" html-type="submit"> 搜索 </a-button>
              <a-button @click="handleReset" style="margin-left: 10px">
                重置
              </a-button>
            </div>
          </form>
        </Card> -->
        </div>
        <Card class="mr-4" style="margin-top: 10px;" v-if="timelineData && Object.keys(timelineData).length > 0">
            <a-timeline>
                <a-timeline-item v-for="(item, date) in timelineData" :key="date" color="#1890ff">
                    <div class="timeline-card" :style="{ borderTop: `3px solid #1890ff` }">
                        <div class="card-header">
                            <span class="date font18 font-bold">{{ date }}</span>
                        </div>
                        <div v-for="(val, index) in item" :key="index" class="mt-2">
                            <a-descriptions :column="1" size="small" layout="horizontal">
                                <a-descriptions-item label="目标名称">
                                    <span style="font-weight: bold;">{{ val.className }}</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="人员名称">
                                    {{ val.personName }}
                                </a-descriptions-item>
                                <a-descriptions-item label="摄像头名称">
                                    {{ val.streamNickname }}
                                </a-descriptions-item>
                                <a-descriptions-item label="时间">
                                    {{ getHMS(val.alarmTime) }}
                                </a-descriptions-item>
                                <!-- <a-descriptions-item label="头像">
                                    <a-image :width="200" :src="val.imageUrl" />
                                </a-descriptions-item> -->
                            </a-descriptions>
                            <div class="card-footer">
                                <a-button type="text" size="small" @click="handleDetail(val.videoUrl)">
                                    查看详情
                                </a-button>
                            </div>
                        </div>
                    </div>
                </a-timeline-item>
            </a-timeline>
        </Card>
        <div  class="mt-5 flex h-64 items-center justify-center rounded-lg" v-else>
                 <div class="text-center text-gray-500">
                    <p class="text-lg font-medium">暂无数据</p>
                </div>
        </div>
        <a-modal v-model:open="open" title="访客轨迹视频" width="800px" :footer="null" height="600px">
            <video width="720" height="580" controls="controls" :src="currentVideoUrl">
            </video>
        </a-modal>
    </div>
</template>

<style scoped>
.search-container {
    padding: 20px;
    background-color: #f0f2f5;
    border-radius: 4px;
}

.search-input-group {
    display: flex;
    align-items: center;
}

.timeline-wrapper {
    padding: 40px 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
}

.custom-dot {
    display: flex;
    width: 24px;
    height: 24px;
    border: 3px solid;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: white;
}

.timeline-card {
    padding: 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.date {
    color: #666;
    font-size: 14px;
}

h3 {
    margin: 8px 0;
    color: #333;
}

.content {
    color: #666;
    line-height: 1.6;
}

.card-footer {
    margin-top: 16px;
    text-align: right;
}

.font-bold {
    font-weight: bold;
}

.font18 {
    font-size: 18px;
}
</style>
